<template>
    <div class="comment-comp">
        <h3 class="text">{{comments.length}} 条评论</h3>
        <!--        发布评论-->
        <div class="comment-send-box">

            <div class="send-box-input">
                <el-avatar v-if="$store.state.user.avatar" :src="$store.state.user.avatar" class="send-avatar"
                           style="cursor: pointer" size="medium">
                </el-avatar>
                <el-avatar v-else :src="$Constants.DEFAULT_AVATAR" class="send-avatar" style="cursor: pointer"
                           size="medium">
                </el-avatar>
                <el-input
                        class="send-content"
                        maxlength="255"
                        minlength="1"
                        show-word-limit
                        autosize
                        resize="none"
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="textarea">
                </el-input>
            </div>

            <div class="comment-send-btn">
                <el-button size="small" type="success" @click="sendComment">提交评论</el-button>
            </div>

        </div>


        <!--   评论列表-->
        <CommentParent v-for="(item,index) in comments" :key="index" :commentParent="item"/>

        <div v-if="comments.length > params.pageSize">
            <div v-if="flag" class="moment-more" @click="clickMore">点击加载更多</div>
            <div v-else class="moment-more">已经到底啦!</div>
        </div>

    </div>
</template>

<script>
    import CommentParent from "./child/CommentParent";

    import {listCommentOfMoment} from "@/api/common/common"
    import {sendComment} from "@/api/business/comment"

    export default {
        name: 'Comment',
        data() {
            return {
                flag: true,
                textarea: "",
                params: {
                    momentId: -1,
                    pageNum: 1,
                    pageSize: 5,
                },
                comments: [],
                total: 0
            };
        },
        props: {
            momentId: {
                type: Number,
            },
            account: {
                type: String,
            },
            type: {
                type: Number,
            }
        },
        methods: {
            /**
             * 获取评论列表
             */
            listCommentOfMoment() {
                if (this.momentId) {
                    this.params.momentId = this.momentId
                    listCommentOfMoment(this.params).then(res => {
                        this.comments.push(...res.rows)
                        this.total = res.total
                        if (!res.rows || res.rows.length == 0) {
                            this.flag = false
                        }
                    })
                }
            },
            /**
             * 点击获取更多
             */
            clickMore() {
                if (this.flag) {
                    this.params.pageNum++
                    this.listCommentOfMoment()
                }
            },
            /**
             * 发表评论
             */
            sendComment() {
                if (!this.isLogin()) {
                    this.msgError("请登录之后再评论")
                    return
                }
                if (this.textarea.trim() === "") {
                    this.msgWarn("请输入有效评论")
                    return
                }
                let params = {
                    account: this.account,
                    type: this.type,
                    typeId: this.momentId,
                    content: this.textarea,
                    level: 1
                }
                sendComment(params).then(res => {
                    this.comments.unshift(res.data)
                    this.textarea = ""
                    this.msgSuccess("发表成功")
                })
            }
        },
        mounted() {
            this.listCommentOfMoment()
        },
        components: {
            CommentParent
        }
    }
</script>

<style scoped lang='less'>
    .comment-comp {

        background-color: white;
        padding: 10px;
        margin-bottom: 30px;

        .moment-more:hover {
            color: #E6A23C;
        }

        .moment-more {
            cursor: pointer;
            height: 30px;
            font-size: 13px;
            text-align: center;
            line-height: 30px;
            background-color: #F2F6FC;
            color: #606266;
        }

        h3.text {
            margin-bottom: 20px;
            font-size: 16px;
            border-bottom: 1px solid #EBEEF5;
            padding-bottom: 10px;
            font-weight: 700;
        }

        .comment-send-box {


            .send-box-input {
                display: flex;
                margin-bottom: 10px;

                .send-content {
                    flex: 1;
                }

                .send-avatar {
                    margin-right: 10px;
                }
            }

            .comment-send-btn {
                text-align: right;
                margin-bottom: 10px;
            }

        }
    }
</style>